<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
     table{
        width:460px;
        border: 3px solid #ccc;
        border-collapse: collapse;
     }
     
     table th,table td{
         border:1px solid #ccc;
     }
     
</style>
 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
 <!--  
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
-->
</head>
<body>
      <table align="center">
          <tr>
            <th>部门</th>
            <th>平均薪资</th>
            <th>最高薪资</th>
            <th>最低薪资</th>
          </tr>
          <c:forEach items="${deptSalVos}" var='vo' >
             <tr>
               <td>${vo.dname}</td>
               <td>${vo.avgSal}</td>
               <td>${vo.maxSal}</td>
               <td>${vo.minSal }</td>
              </tr>
          </c:forEach>
      </table>
      
        <div id="container" style="height:300px;margin-top:50px;margin:auto"></div>
<script type="text/javascript">

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['部门', '平均薪资', '最高薪资', '最低薪资'],           
            <c:forEach items="${deptSalVos}" var='vo' varStatus="i">
               ['${vo.dname}',${vo.avgSal},${vo.maxSal},${vo.minSal}]
               <c:if test="${i.last==false}">
               ,
               </c:if>
             </c:forEach>
 
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
</body>
</html>